<template>
    <Modal v-model="bindMobileModal" class="pages-home-homeIndex-bindMobileModal" :mask-closable="false" @on-cancel="cancelModalBtn" class-name="vertical-center-modal">
        <p slot="header" style="color:#f60;text-align:center">
            <Icon type="information-circled"></Icon>
            <span>{{isBind ? '解绑' : '绑定'}}手机号</span>
        </p>
        <div>
            <Form :model="formValidate"  label-position="left" :label-width="100">
                <Form-item label="手机号码：" style="margin-bottom: 0">
                    <Row>
                        <Col span="22">
                            <Input v-if="isBind" v-model="formValidate.mobile" placeholder="请输入已绑定的手机号码" :maxlength="11">
                            </Input>
                            <Input v-else v-model="formValidate.mobile" placeholder="请输入要绑定的手机号码" :maxlength="11">
                            </Input>
                        </Col>
                    </Row>
                </Form-item>

                <Form-item label="短信验证码：" style="margin-bottom: 0">
                    <Row>
                        <Col span="15">
                            <Input v-model="formValidate.code" placeholder="请输入验证码">
                        </Input>
                        </Col>
                        <Col span="8">
                            <button type="button" class="btn btn-primary" @click="requestBindPhone()" style="margin-left: 25px">获取验证码</button>
                        </Col>
                    </Row>
                </Form-item>

            </Form>
        </div>
        <div slot="footer">
            <button class="btn btn-primary" @click="verifySMSCode()">确认提交</button>
        </div>
    </Modal>
</template>

<script type="text/ecmascript-6">

    import getData from '../../../api/getData'

    export default {
    	props: ['bind-type'],
        data: function () {
            return {
                bindMobileModal: true,
                isBind: true,
                formValidate: {
                	mobile: '',
                    code: ''
                }
            }
        },
        mounted(){
    	    this.isBind = this.bindType ? true : false;
        },
        methods: {
            cancelModalBtn:function(){
                this.bindMobileModal = false;
                this.$emit("close-modal");
            },

            //发送一个请求，获取验证码
            requestBindPhone:function(){
                var self = this;
                getData.post("requestBindPhone", {phone : self.formValidate.mobile} ).then(function (response) {
                    if(response.data.code != 0){
                        self.$Message.info( response.data.msg ? response.data.msg : '网络错误，请稍后重试' );
                    }
                }).catch(function (response) {
                    self.$Message.info('网络错误，请联系客服');
                });
            },

            //验证码手机短信，并进行绑定操作；action参数：手机初次绑定操作：BindPhone；手机短信权限验证：CheckSMS； 解绑：ChangePhone
            verifySMSCode: function(){
                var self = this;
                getData.post("verifySMSCode", {
                	phone: self.formValidate.mobile,
                    code: self.formValidate.code,
                    action: self.isBind ? 'ChangePhone' : 'BindPhone'
                }).then(function (response) {
                    if( response.data.code == 0 ){
                        self.isBind = !self.isBind;
                        self.$emit('set-mobile', self.isBind ? self.formValidate.mobile : '');
                        //如果是解绑成功需清空表单信息，绑定新的号码，若为绑定成功关闭模态框
                        if(!self.isBind){
                            self.$Message.info( '解绑成功，请绑定新的手机号码' );
                            self.formValidate = {
                            	mobile: '',
                                code: ''
                            };
                        }else{
                        	self.cancelModalBtn();
                        }
                    }else{
                    	self.$Message.info( response.data.msg ? response.data.msg : '网络错误，请稍后重试' );
                    }

                }).catch(function (response) {
                    self.$Message.info('网络错误，请联系客服');
                });
            }

        },
        components: {
        }
    }
</script>

<style scoped lang="scss">
    .pages-home-homeIndex-bindMobileModal{
    }
</style>
